<template>
    <div class="out_box" v-cloak>
        <headers />

        <div class="content_case">
            <div class="content_box">
                <div class="info_box">
                    <div class="type">
                        <img class="img" :src="img_url_appSource + dataForm.currency + '.png'" />
                        <p class="text">{{ dataForm.currency }}</p>
                    </div>
                    <div class="info">
                        <p class="title">{{ dataForm.cperiod + '天' }}  {{ dataForm.unit }}</p>
                        <v-progress-line class="theme_bg" :percent="purchasePercent" :show-info="false" :stroke-width="7" normalColor="#2744FF"></v-progress-line>
                        <div class="sale cl">
                            <span class="f_l bought">{{'已认购' + (dataForm.totalRelease - dataForm.surplus) + '份'}} 丨 {{ purchasePercent + '%' }}</span>
                            <span :class="['f_r', 'surplus', {'warn': Number(dataForm.surplus) < 100}]">{{'剩余' + dataForm.surplus + '份'}}</span>
                        </div>
                        <div class="total cl">
                            <p class="f_l">预估理论年化收益率：<span class="percent">{{ dataForm.referenceYields + ' %' }}</span></p>
                            <p class="f_l">预估理论总产量/份：<span class="number">{{ (dataForm.dayYield * dataForm.cperiod).toFixed(6) + '(' + dataForm.currency + ')' }}</span></p>
                            <p class="f_r">预估日产币量/份：<span class="number">{{ Number(dataForm.dayYield).toFixed(6) + '(' + dataForm.currency + ')' }}</span></p>
                        </div>
                    </div>
                </div>
                <div class="speed_box">
                    <div class="info">
                        <img class="img" :src="img_url_appSource + dataForm.itcImage" />
                        <p class="text">{{ dataForm.minerName }}</p>
                    </div>
                    <div class="speed_case cl">
                        <div class="list f_l relative">
                            <p class="top">下单时间</p>
                            <span class="sign ok"></span>
                            <p class="bottom">{{ dataForm.orderStatus[0][0] }}<br />{{ dataForm.orderStatus[0][1] }}</p>
                        </div>
                        <!-- <div class="list f_l relative">
                            <p class="top">审核中</p>
                            <span class="sign"></span>
                            <p class="bottom text_l">
                                <span class="icon success">审核成功</span>
                                <br />
                                <span class="icon error">审核失败</span>
                            </p>
                        </div> -->
                        <div class="list f_l relative">
                            <p class="top">挖币时间</p>
                            <span class="sign"></span>
                            <p class="bottom">{{ dataForm.orderStatus[1][0] }}<br />{{ dataForm.orderStatus[1][1] }}</p>
                        </div>
                        <!-- <div class="list f_l relative">
                            <p class="top">待挖矿</p>
                            <span class="sign"></span>
                            <p class="bottom text_l">
                                <span class="icon success">挖矿中&nbsp;&nbsp;&nbsp;</span>
                                <br />
                                <span class="icon warn">挖矿故障</span>
                            </p>
                        </div> -->
                        <div class="list f_l relative">
                            <p class="top">收益时间</p>
                            <span class="sign"></span>
                            <p class="bottom">{{ dataForm.orderStatus[2][0] }}<br />{{ dataForm.orderStatus[2][1] }}</p>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <h2 class="title">订单信息</h2>
                    <v-form direction="horizontal">
                        <v-form-item class="border" label="挖矿天数" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text" id="userName" name="userName">{{ dataForm.cperiod + ' 天' }}</span>
                        </v-form-item>
                        <v-form-item class="border" label="算力数量" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text" id="userName" name="userName">{{ dataForm.cpower + '(' + dataForm.unitStr + ')' }}</span>
                        </v-form-item>
                        <v-form-item class="border" label="预估到期时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text" id="userName" name="userName">{{ dueDate }}</span>
                        </v-form-item>
                        <v-form-item class="border" label="算力费用" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <p class="care" id="userName" name="userName">{{ '$ ' + Number(dataForm.cprice).toFixed(2) }}</p>
                            <p class="tips" id="userName" name="userName">{{ '≈ ￥ ' + $convertRMB(dataForm.cprice) }}</p>
                        </v-form-item>
                        <v-form-item class="border" label="电力费用" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text care" id="userName" name="userName">{{ '$ ' +  Number(dataForm.electricityfees).toFixed(2) }}</span>
                            <!-- <span class="ant-form-text original_price" id="userName" name="userName">原价：$ 50</span> -->
                            <p class="tips" id="userName" name="userName">{{ '≈ ￥ ' + $convertRMB(dataForm.electricityfees) }}</p>
                        </v-form-item>
                        <v-form-item class="border" label="机位费用" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text care" id="userName" name="userName">{{ '$ ' + Number(dataForm.seatfee).toFixed(2) }}</span>
                            <!-- <span class="ant-form-text original_price" id="userName" name="userName">原价：$ 50</span> -->
                            <p class="tips" id="userName" name="userName">{{ '≈ ￥ ' + $convertRMB(dataForm.seatfee) }}</p>
                        </v-form-item>
                        <v-form-item class="border" label="维修费用" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text care" id="userName" name="userName">{{ '$ ' + Number(dataForm.upkeep).toFixed(2) }}</span>
                            <!-- <span class="ant-form-text original_price" id="userName" name="userName">原价：$ 50</span> -->
                            <p class="tips" id="userName" name="userName">{{ '≈ ￥ ' + $convertRMB(dataForm.upkeep) }}</p>
                        </v-form-item>
                        <v-form-item label="购买数量" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <div class="number_input">
                                <span class="f_l btn" @click="calcNum(1)">-</span>
                                <span class="f_l value">{{ dataForm.num > 0 ? dataForm.num : '最低1份起' }}</span>
                                <span class="f_l btn" @click="calcNum(2)">+</span>
                            </div>
                            <span class="ant-form-text" id="userName" name="userName">份</span>
                        </v-form-item>
                        <v-form-item class="border" label="优惠券" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-select style="width: 120px;" :data="currencyOptions.options" :value="currencyOptions.value"></v-select>
                        </v-form-item>
                        <v-form-item class="border" label="订单金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text money care" id="userName" name="userName">{{ '$ ' + totalPrice }}</span>
                            <p class="tips" id="userName" name="userName">{{ '≈ ￥ ' + $convertRMB(totalPrice) }}</p>
                            <div class="">
                                <span class="special_price">立省：$ 0.00</span>
                                <!-- <span class="ant-form-text original_price" id="userName" name="userName">原价：$ 50</span> -->
                            </div>
                        </v-form-item>
                    </v-form>
                    <div class="save_box">
                        <p class="count_date">{{ countTime[0] + ':' + countTime[1] + ':' + countTime[2] }}</p>
                        <p class="text">订单将失效，请及时完成交易</p>
                        <button class="btn" type="primary" size="large" @click="pushData()">确定</button><br />
                        <v-checkbox v-model="agreement">我接受《GRINOK算力购买协议》</v-checkbox>
                    </div>
                </div>
            </div>
        </div>
        <div class="rule_box">
            <h2><img class="img" src="@assets/imgs/common/careful.png" /> 注意事项</h2>
            <h4 class="title">法律声明</h4>
            <p class="text">矿机算力共享套餐服务在以下国家或地区被禁止:巴尔干半岛、白俄罗斯、缅甸、科特迪瓦(象牙海岸)，克里米亚-乌克兰、古巴、刚果民主共和国、伊朗、伊拉克、利比里亚、朝鲜、苏丹、叙利亚、委内瑞拉、津巴布韦。请确认矿机算力共享套餐服务在您的国家或地区是合法的。否则您将承担一切法律后果。</p>
            <h4 class="title">无法退款</h4>
            <p class="text">按照协议规定，一旦订单已付款，将不支持退款，请慎重选择。</p>
            <h4 class="title">定价规则</h4>
            <p class="text">矿机算力共享套餐的定价会根据算力采购价及电力成本等多因素调整。实际购买价格以用户付款时为准，后续即使价格发生变化，GRINOK也不会对这个订单进行差价补偿。GRINOK不承诺、不预判任何数字资产的价格及其未来走势。</p>
            <h4 class="title">算力波动说明</h4>
            <p class="text">GRINOK提供的矿机算力套餐对应的为真实算力，真实算力由于网络、矿机功率、矿池总算力等不稳定因素会导致波动，GRINOK不承诺100%稳定运行。</p>
            <h4 class="title">不可控风险声明</h4>
            <p class="text">GRINOK不对以下不可控风险所造成的损失负责：不能预见、不能避免或不能克服的客观事件，包括自然灾害如洪水、火山爆发、地震、山崩、火灾、被当地政府部门评定为百年不遇级别以上的风暴和恶劣气候等，政府行为或指令，城市级别的电网供电事故，以及社会异常事件如战争、罢工、动乱、疫情等。</p>
            <h4 class="title">使用范围声明</h4>
            <p class="text">用户不得将GRINOK提供的算力用于攻击网络等违法违规行为，否则GRINOK有权强行收回您的算力且不承担任何违约责任。</p>
        </div>

        <footers></footers>
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';
    import Notice from '@components/notice/notice.vue';
    import PersonalMenu from '@components/personal_menu/personal_menu.vue';
    import { getOneHashRate, submitOrder } from '@doapis/orders/orders.js';

    let setCount;

    export default {
        name: "Purchase",
        components: {
            Headers,
            Footers,
            Notice,
            PersonalMenu
        },
        data: function() {
            return {
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
                agreement: true,
                currencyOptions: {
                    options: [
                        {
                            value: '0',
                            label: '请选择'
                        }
                    ],
                    value: 1
                },
                dataForm: {
                    orderStatus: [[], [], []]
                },
                countTime: [0, 0, 0],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            },
            dueDate: function() {
                const dataForm = this.dataForm;
                if ($.$testNotUndefined(dataForm.cperiod)) {
                    return $.$calcDate(null, 86400 * dataForm.cperiod, [true]);
                }
            },
            purchasePercent: function() {
                const dataForm = this.dataForm;
                if ($.$testNotUndefined(dataForm.totalRelease, dataForm.surplus)) {
                    return (dataForm.totalRelease - dataForm.surplus) / dataForm.totalRelease * 100;
                }
            },
            totalPrice: function() {
                const dataForm = this.dataForm;
                if ($.$testNotUndefined(dataForm.onprice, dataForm.num)) {
                    return (dataForm.onprice * dataForm.num).toFixed(2);
                }
            }
        },
        methods: {
            pushData: function() {
                const that = this;
                let dataForm = that.dataForm;
                if (dataForm.num < 1) {
                    that.$notification.error({
                        message: '操作错误',
                        description: '请填写购买数量！！',
                    });
                } else if (!that.agreement) {
                    that.$notification.error({
                        message: '操作错误',
                        description: '请先勾选购买协议！！',
                    });
                } else {
                    submitOrder({
                        memberid: that.userDATA.memberid,
                        cnumber: dataForm.num,
                        ctype: dataForm.ctype
                    }).then(function(res) {
                        that.$router.push({ path: '/hash_rate/purchase', query: {
                            totalPrice: that.totalPrice,
                            orderId: res.data.orderId
                        }});
                    });
                }
            },
            getData: function(params) {
                const that = this;
                let date = new Date();

                getOneHashRate({ id: params.id }).then(function(res) {
                    res.data.num = 0;
                    res.data.unitStr = res.data.unit.split(' ')[1];
                    res.data.orderStatus = [
                        $.$getFormatMD(new Date(), true).split(' ').reverse(),
                        $.$calcDate(null, 86400 * 3, [true]).split(' ').reverse(),
                        $.$calcDate(null, 86400 * 4, [true]).split(' ').reverse(),
                    ];
                    that.dataForm = res.data;

                    let countTime = $.$calcDate(null, 3600 * 30) - new Date();
                    setCount = setInterval(function() {
                        if (countTime > 0) {
                            that.countTime = $.$getCountDown(countTime);
                            countTime = countTime - 1000;
                        } else {
                            clearInterval(setCount);
                        }
                    }, 1000);
                });
            },
            // 加减购买数量
            calcNum: function(type) {
                let num = this.dataForm.num;
                if (type === 1 && num > 1) {
                    num--;
                } else if (type === 2) {
                    num < 1 ? num = 1 : num++;
                }
                this.dataForm.num = num;
            },
            $convertRMB: $.$convertRMB
        },
        mounted: function() {
            const query = this.$route.query;
            this.getData(query);
        },
        destroyed: function () {
            clearInterval(setCount);
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .content_case{
        background-color: white;
    }
    .content_box{
        width: 80%;
        min-width: 800px;
        padding: 40px 0;
        margin: 0 auto;
    }
    .info_box{
        .flex_row_wrap;
        .type{
            margin-right: 80px;
            .img{
                width: 90px;
                margin: 0 auto;
            }
            .text{
                margin-top: 16px;
                font-size: 18px;
                font-weight: 700;
                text-align: center;
                line-height: 12px;
            }
        }
        .info{
            flex: 4;
            .title{
                margin-bottom: 10px;
                font-size: 22px;
                font-weight: 700;
                line-height: 28px;
            }
            .sale{
                margin-top: 4px;
                font-size: 10px;
                .bought{
                    color: @theme_color;
                }
                .surplus{
                    .font_gray;
                    &.warn{
                        color: @color_orange;
                    }
                }
            }
            .total{
                margin-top: 26px;
                font-size: 10px;
                .font_gray;
                >p{
                    line-height: 18px;
                    box-sizing: border-box;
                    &:nth-child(1){
                        width: e("calc(33.33% - 48px)");
                    }
                    &:nth-child(2){
                        padding: 0 24px;
                        text-align: center;
                        border-left: 1px solid #CCC;
                        border-right: 1px solid #CCC;
                    }
                    &:nth-child(3){
                        width: 33.33%;
                        text-align: right;
                    }
                }
               .percent{
                   font-size: 20px;
                   color: #29CC00;
               }
               .number{
                   color: #333;
                   font-weight: 700;
               }
            }
        }
    }
    .speed_box{
        .flex_row_wrap;
        margin-top: 60px;
        .info{
            width: 110px;
            margin-right: 30px;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #ededed;
            box-shadow: 0px 6px 10px rgba(41,72,255,0.1);
            .text{
                padding: 10px 0;
                font-weight: 700;
                text-align: center;
                color: #333;
            }
        }
        .speed_case{
            flex: 4;
            padding: 20px 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #ededed;
            box-shadow: 0px 6px 10px rgba(41,72,255,0.1);
            .list{
                width: 20%;
                width: 33.33%;
                text-align: center;
                &:before{
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 100%;
                    height: 2px;
                    margin-top: 2px;
                    border-bottom: 2px dashed #CCC;
                }
                &:last-child:before{
                    content: none;
                }
                .top, .bottom{
                    height: 20px;
                }
                .top{
                    font-weight: 700;
                    line-height: 14px;
                }
                .bottom{
                    font-size: 13px;
                    line-height: 16px;
                    .font_gray;
                    .icon{
                        margin-left: 50%;
                        padding-left: 10px;
                        position: relative;
                        font-size: 10px;
                        color: #333;
                        &:before{
                            content: '';
                            position: absolute;
                            left: -6px;
                            bottom: 2px;
                            width: 12px;
                            height: 12px;
                            display: inline-block;
                            border-radius: 50%;
                            background-color: #CCC;
                        }
                        &.success:before{
                            background-color: @color_green;
                        }
                        &.error:before{
                            background-color: @color_orange;
                        }
                        &.warn:before{
                            background-color: @color_yellow;
                        }
                    }
                }
                .sign{
                    width: 12px;
                    height: 12px;
                    display: inline-block;
                    position: relative;
                    z-index: 4;
                    margin: 14px 0 4px 0;
                    background-color: #CCC;
                    border-radius: 50%;
                    &.ok{
                        background-color: @theme_color;
                    }
                }
            }
        }
    }
    .content{
        >.title{
            margin-top: 60px;
            padding: 10px 20px;
            font-weight: 700;
            background-color: #F5F5F5;
        }
        /deep/ label{
            font-size: 15px;
            .font_gray;
        }
        /deep/ .ant-form-item{
            padding: 30px 0;
            margin-bottom: 0;
            font-size: 16px;
            font-weight: 700;
            &.border{
                border-bottom: 1px solid #efeff4;
            }
            .original_price{
                font-size: 10px;
                .font_gray;
                text-decoration: line-through;
            }
            .tips{
                font-size: 10px;
                .font_gray;
            }
            .money{
                font-size: 22px;
            }
            .special_price{
                margin-right: 8px;
                font-size: 14px;
                font-weight: normal;
                color: #FF3C00;
            }
        }
        /deep/ .ant-form-item-label{
            width: 22%;
            max-width: 220px;
            padding-left: 50px;
            text-align: left;
        }
        .care{
            color: @color_orange;
        }
        .number_input{
            display: inline-block;
            height: 34px;
            line-height: 34px;
            font-weight: normal;
            text-align: center;
            border: 1px solid #efeff4;
            vertical-align: middle;
            .btn{
                width: 34px;
                height: 100%;
                font-size: 20px;
                cursor: pointer;
            }
            .value{
                display: inline-block;
                width: 100px;
                font-size: 14px;
                background-color: #f3f3f3;
            }
        }
        .save_box{
            margin-top: 40px;
            text-align: center;
            .count_date{
                color: #FF3C00;
                font-size: 22px;
                font-weight: 700;
            }
            .text{
                font-size: 13px;
            }
            .btn{
                width: 200px;
                line-height: 40px;
                margin: 30px 0 10px 0;
                font-size: 14px;
                color: white;
                border: none;
                border-radius: 34px;
                background: linear-gradient(139deg, #ff9100 0%, #ff3c00 100%);
                cursor: pointer;
            }
        }
    }
    .rule_box{
        width: 80%;
        min-width: 800px;
        margin: 30px auto;
        font-weight: 700;
        >h2{
            font-weight: 700;
            .img{
                margin-left: -34px;
                display: inline-block;
                width: 28px;
                vertical-align: text-top;
            }
        }
        .title{
            margin: 20px 0 10px 0;
            color: #666;
        }
        .text{
            line-height: 16px;
            font-size: 10px;
            font-weight: normal;
            .font_gray;
        }
    }
</style>
